<template>
    <div class="correct-container">
      <a-card :title="`作业批改 - ${homework?.title}`">
        <template #extra>
          <a-button type="primary" @click="handleSubmit" :loading="submitting">提交批改</a-button>
        </template>
  
        <a-descriptions bordered>
          <a-descriptions-item label="课程名称">{{ homework?.courseTitle }}</a-descriptions-item>
          <a-descriptions-item label="学生姓名">{{ homework?.studentId }}</a-descriptions-item>
          <a-descriptions-item label="截止时间">{{ formatTime(homework?.deadline) }}</a-descriptions-item>
        </a-descriptions>
  
        <div class="section">
          <h3>学生答案</h3>
          <div class="content-box">{{ homework?.studentAnswer || '暂无文字答案' }}</div>
        </div>
  
        <div class="section">
    <h3>学生附件</h3>
    <div v-if="homework?.studentAttachment" class="attachment">
      <a class="download-link" @click="downloadAttachment(homework.studentAttachment)">
        <file-outlined /> 下载附件
      </a>
    </div>
    <div v-else>暂无附件</div>
  </div>
  
        <div class="score-input">
          <a-input-number
            v-model:value="score"
            :min="0"
            :max="100"
            :precision="1"
            placeholder="请输入分数"
          />
          <span style="margin-left: 8px">分</span>
        </div>
      </a-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { FileOutlined } from '@ant-design/icons-vue';
  import { getHomeworkDetailApi, correctHomeworkApi } from '/@/api/homework';
  import dayjs from 'dayjs';
  import { message } from 'ant-design-vue';
  import { Homework } from '/@/entity/Homework';
  import { BASE_URL } from "/@/store/constants";
  
  
  const route = useRoute();
  const homework = ref<Homework>();
  const score = ref<number>();
  const submitting = ref(false);
  
  const formatTime = (time?: string) => time ? dayjs(time).format('YYYY-MM-DD HH:mm') : '';
  const getFileUrl = (filename: string) => `${BASE_URL}/api/staticfiles/attachment/${filename}`;

  const downloadAttachment = async (filename: string) => {
  try {
    const response = await fetch(getFileUrl(filename));
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = filename.split('_').slice(1).join('_'); // 移除时间戳，保留原始文件名
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    message.error('下载失败: ');
  }
};
  
  onMounted(async () => {
    try {
      const data = await getHomeworkDetailApi(Number(route.params.id));
      homework.value = data;
      score.value = data.score;
    } catch (error) {
      message.error('加载作业详情失败');
    }
  });
  
  const handleSubmit = async () => {
    if (!score.value) {
      message.warning('请输入分数');
      return;
    }
  
    submitting.value = true;
    try {
      await correctHomeworkApi(Number(route.params.id), score.value);
      message.success('批改成功');
      homework.value!.status = 2;
      homework.value!.score = score.value;
    } catch (error) {
      message.error('批改失败');
    } finally {
      submitting.value = false;
    }
  };
  </script>
  
  <style scoped>
  .correct-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .section {
    margin: 24px 0;
  }
  
  .content-box {
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 100px;
  }
  
  .score-input {
    margin-top: 24px;
    display: flex;
    align-items: center;
  }
  .download-link {
  color: #1890ff;
  cursor: pointer;
  
  &:hover {
    color: #0066ff;
    text-decoration: underline;
  }
}
  </style>